<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp" %>
<jsp:useBean id="question" class="com.carlinfo.userscenter.stu.pojo.Question"></jsp:useBean>
<!DOCTYPE HTML>
<html>
	<head>
		<title>新增文章 - 朝代管理 </title>
		<%@ include file="/common/include/title.jsp" %>
		<script src="${rootPath }/common/plugin/jiaoben5789/js/turntable.js"></script>
		<script type="text/javascript" src="${rootPath }/common/resource/H-ui.admin/lib/ueditor/1.4.3/ueditor.config.js"></script> 
		<script type="text/javascript" src="${rootPath }/common/resource/H-ui.admin/lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
		<script type="text/javascript" src="${rootPath }/common/resource/H-ui.admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
		<meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
		<meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
		<style>
			.lottery 
			{
				position: relative;
				display: inline-block;
				text-align:center
			}
		
			.lottery img 
			{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -76px;
				margin-top: -82px;
				cursor: pointer;
			}
		
			#message 
			{
				position: absolute;
				top: 0px;
				left: 10%;
			}
		</style>
	</head>
	<body>
	<center>
		<div class="lottery">
			<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
				当前浏览器版本过低，请使用其他浏览器尝试
			</canvas>
			<p id="message" style="text-align: center;font-size:2em;color:red;"></p>
			<img src="${rootPath }/common/plugin/jiaoben5789/images/start.png" id="start">
		</div>
	</center>
	<script>
		var url="/stu-ques-web/common/plugin/jiaoben5789/";
		var url2="/stu-ques-web/"
		
		// 初始化装盘数据 正常情况下应该由后台返回
		
		var initData = {
			"success": true,
			"list": [{
					"id": 100,
					"name": "马林泉",
					"image":url+ "/images/1.png",
					"rank":1,
					"percent":3
				},
				{
					"id": 101,
					"name": "党耀华",
					"image": url+ "/images/1.png",
					"rank":2,
					"percent":5
				},
				{
					"id": 102,
					"name": "陈乐乐",
					"image": url+ "/images/1.png",
					"rank":3,
					"percent":2
				},
				{
					"id": 103,
					"name": "毕毓天",
					"image":url+  "/images/1.png",
					"rank":4,
					"percent":49
				},
				{
					"id": 104,
					"name": "李恒",
					"image":url+  "/images/1.png", 
					"rank":5,
					"percent":30
				},
				{
					"id": 105,
					"name": "张华强",
					"image": url+ "/images/1.png", 
					"rank":6,
					"percent":1
				},
				{
					"id": 106,
					"name": "耿铁恒",
					"image":url+ "/images/1.png", 
					"rank":7,
					"percent":10
				},
				{
					"id": 107,
					"name": "王聪",
					 "image":url+ "/images/1.png", 
					"rank":8,
					"percent":10
				},
				{
					"id": 108,
					"name": "钱占元",
					 "image":url+ "/images/1.png", 
					"rank":9,
					"percent":10
				},
				{
					"id": 109,
					"name": "李善壮",
					 "image":url+ "/images/1.png", 
					"rank":10,
					"percent":10
				},
				{
					"id": 110,
					"name": "王天亮",
					 "image":url+ "/images/1.png", 
					"rank":11,
					"percent":10
				},
				{
					"id": 111,
					"name": "崔仁贵",
					 "image":url+ "/images/1.png", 
					"rank":12,
					"percent":10
				},
				{
					"id": 112,
					"name": "焦逢辉",
					 "image":url+ "/images/1.png", 
					"rank":13,
					"percent":10
				},
				{
					"id": 113,
					"name": "高尚",
					 "image":url+ "/images/1.png", 
					"rank":14,
					"percent":10
				},
				{
					"id": 114,
					"name": "张晓柱",
					 "image":url+ "/images/1.png", 
					"rank":15,
					"percent":10
				},
				{
					"id": 115,
					"name": "李鹏飞",
					 "image":url+ "/images/1.png", 
					"rank":16,
					"percent":10
				}
			]
		}
	
		// 计算分配获奖概率(前提所有奖品概率相加100%)
		function getGift()
		{
			var percent = Math.random()*100
			var totalPercent = 0
			for(var i = 0 ,l = initData.list.length;i<l;i++)
			{
				totalPercent += initData.list[i].percent
				if(percent<=totalPercent)
				{
					return initData.list[i]
				}
			}  
			
		}
	
		var list = {}
		var stuName =""
		var angel = 360 / initData.list.length
		// 格式化成插件需要的奖品列表格式
		for (var i = 0, l = initData.list.length; i < l; i++) {
			list[initData.list[i].rank] = {
				id:initData.list[i].id,
				name: initData.list[i].name,
				image: initData.list[i].image
			}
		}
		// 查看奖品列表格式
		
		// 定义转盘奖品
		wheelSurf = $('#myCanvas').WheelSurf({
			list: list, // 奖品 列表，(必填)
			outerCircle: {
				color: '#df1e15' // 外圈颜色(可选)
			},
			innerCircle: {
				color: '#f4ad26' // 里圈颜色(可选)
			},
			dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
			disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
			title: {
				color: '#5c1e08',
				font: '19px Arial'
			} // 奖品标题样式(可选)
		})
	
		// 初始化转盘
		wheelSurf.init()
		
		var count = 0
		var id = 0
		// 抽奖
		var throttle = true;
		$("#start").on('click', function () {
			$.ajax({
				type:"POST",
				url:url2+"back/StudentBackServlet?method=gameStartSubmit",
				success: function(data){
					stuName=data.name,
					id = data.id
					wheelSurf.lottery(((id-1) * angel + angel / 2), function () {
						$("#message").html("恭喜"+stuName+"中奖了!")
						throttle = true;
					})
				},
				"dataType":"json"
			})
			var winData = getGift() // 正常情况下获奖信息应该由后台返回
			
			$("#message").html('')
			if(!throttle){
				return false;
			}
			throttle = false;
			
			// 计算奖品角度
	
			for (const key in list) {
				if (list.hasOwnProperty(key)) {                    
					if (winData.id == list[key].id) {
						break;
					}
					count =  id   
				}
			} 
			
	  		console.info(stuName);
			console.info("我是id:"+count+"我是名字:"+stuName)
			// 转盘抽奖，
			//$("#music").pause();
		})
	</script>
	<script type="text/javascript">
		$(function(){
	    var music = document.getElementById("music");
	    $("#start").click(function(){
	    if(music.paused){music.play();
	   // $("#start").removeClass("pause").addClass("play");
	    }else{music.pause();
	    //$("#start").removeClass("play").addClass("pause");
		}});
	    });
	</script>

	
	<h4 style="text-align: center;">${requestScope.info}</h4>
	<audio id="music" src="${rootPath }/common/plugin/jiaoben5789/images/music.mp3" onplay="this.currentTime=5"  type="video/mp3" style="display: none;">
	</audio>
	<article class="page-container">
		<form class="form form-horizontal" id="form-article-add"
		action="${rootPath }/back/StudentBackServlet?method=answerInsertSubmit" method="post">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>问题id：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="${requestScope.question.id }" readonly="readonly" placeholder="" id="articletitle" name="questionId">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>问题：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="${requestScope.question.name }" readonly="readonly" placeholder="" id="articletitle" name="questionName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>问题分数：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="${score }" placeholder="" readonly="readonly" id="articletitle" name="score">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>答案:</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="answer" id="answer" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="$.Huitextarealength(this,100)"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>得分：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="myScore" name="myScore">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>对错：</label>
				<div class="formControls col-xs-8 col-sm-9">
				<label for="status1">
					<input type="radio" value="1" 
					placeholder="" id="status1" name="status" checked="checked">正确
				</label>
				<label for="status0">
					<input type="radio" value="0" 
					placeholder="" id="status0" name="status">错误
				</label>
				
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
					<button onClick="article_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存答案</button>
					<button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
				</div>
			</div>
			<input type="hidden" value="${lastStu.name }" id="student">
		</form>
	</article>
	
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript">
	$(function(){
		$('.skin-minimal input').iCheck({
			checkboxClass: 'icheckbox-blue',
			radioClass: 'iradio-blue',
			increaseArea: '20%'
		});
		
		//表单验证
		$("#form-article-add").validate({
			rules:{
				articletitle:{
					required:true,
				},
				articletitle2:{
					required:true,
				},
				articlecolumn:{
					required:true,
				},
				articletype:{
					required:true,
				},
				articlesort:{
					required:true,
				},
				keywords:{
					required:true,
				},
				abstract:{
					required:true,
				},
				author:{
					required:true,
				},
				sources:{
					required:true,
				},
				allowcomments:{
					required:true,
				},
				commentdatemin:{
					required:true,
				},
				commentdatemax:{
					required:true,
				},
	
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid",
			submitHandler:function(form){
				//$(form).ajaxSubmit();
				var index = parent.layer.getFrameIndex(window.name);
				//parent.$('.btn-refresh').click();
				parent.layer.close(index);
			}
		});	
		var ue = UE.getEditor('editor');
		
	});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
	</body>
</html>